<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增水费信息')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-waterRate-add">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">序号：</label>
            <div class="col-sm-8">
                <input name="num" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">项目：</label>
            <div class="col-sm-8">
                <input name="projectName" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">单位：</label>
            <div class="col-sm-8">
                <input name="unitName" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">楼层：</label>
            <div class="col-sm-8">
                <input name="floorName" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">房号：</label>
            <div class="col-sm-8">
                <input name="roomNum" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">表号：</label>
            <div class="col-sm-8">
                <input name="checkMeterNum" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required" >A表上期度数：</label>
            <div class="col-sm-8">
                <input name="degreePreA" id="degreePreA" class="form-control" onblur="initDegreeAll()" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required" >A表本期度数：</label>
            <div class="col-sm-8">
                <input name="degreeIssueA" id="degreeIssueA" class="form-control" onblur="initDegreeAll()" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required" >B表上期度数：</label>
            <div class="col-sm-8">
                <input name="degreePreB" id="degreePreB" class="form-control" onblur="initDegreeAll()" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required" >B表本期度数：</label>
            <div class="col-sm-8">
                <input name="degreeIssueB" id="degreeIssueB" class="form-control" onblur="initDegreeAll()" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required" >C表上期度数：</label>
            <div class="col-sm-8">
                <input name="degreePreC" id="degreePreC" class="form-control" onblur="initDegreeAll()" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required" >C表本期度数：</label>
            <div class="col-sm-8">
                <input name="degreeIssueC" id="degreeIssueC" class="form-control" onblur="initDegreeAll()" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required" >D表上期度数：</label>
            <div class="col-sm-8">
                <input name="degreePreD" id="degreePreD" class="form-control" onblur="initDegreeAll()" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required" >D表本期度数：</label>
            <div class="col-sm-8">
                <input name="degreeIssueD" id="degreeIssueD" class="form-control" onblur="initDegreeAll()" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">水费月份：</label>
            <div class="col-sm-8">
                <input name="etldt" class="form-control" placeholder="请填写月份" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">抄表时间：</label>
            <div class="col-sm-8">
                <div class="input-group date" id="issueDate">
                    <input autocomplete="off" type="text" class="time-input form-control" id="issueDate" placeholder="请填写日期"  name="issueDate" required/>
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">乘率：</label>
            <div class="col-sm-8">
                <input name="multiplicationTerm" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">单价：</label>
            <div class="col-sm-8">
                <input name="unitPrice" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注：</label>
            <div class="col-sm-8">
                <input name="remark" class="form-control" type="text">
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: select2-js" />
<script th:inline="javascript">
    var prefix = ctx + "guomao/waterRateManagement"

    $(function () {
        initSelect2();
    })

    function initSelect2(){
        $("select[name='floorName']").select2({
            placeholder:"--请选择楼层--",
            allowClear:true
        });
    }
    function initDegreeAll(){
        var degreeAll = parseFloat(0);
        if($('#degreeIssueA').val()!=null&&$('#degreeIssueA').val()!=''){
            degreeAll+=parseFloat($('#degreeIssueA').val());
        }
        if($('#degreeIssueB').val()!=null&&$('#degreeIssueB').val()!=''){
            degreeAll+=parseFloat($('#degreeIssueB').val());
        }
        $('#degreeIssue').val(degreeAll)
    }

    // $('#xxx').bind("input propertychange",function () {
    //     console.log(11)
    //     console.log($('#issueDate').val())
    // })
    // function initEtldt(){
    //     console.log(111)
    //     console.log($('#issueDate').val())
    // }

    /*检验：只可以填入实数或小数*/
    $.validator.addMethod("degreeAReg",function (value,element) {
        var reg = new RegExp(/^[0-9]+(.[0-9]+)?$/);
        return this.optional(element) || reg.test(value)
    })
    $.validator.addMethod("degreeBReg",function (value,element) {
        var reg = new RegExp(/^[0-9]+(.[0-9]+)?$/);
        return this.optional(element) || reg.test(value)
    })
    $("#form-waterRate-add").validate({
        onkeyup:false,
        rules:{
            degreeIssueA:{
                degreeAReg:true
            },
            degreeIssueB:{
                degreeBReg:true
            }
        },
        messages:{
            degreeIssueA:{
                degreeAReg: "请输入正确水表度数"
            },
            degreeIssueB:{
                degreeBReg: "请输入正确水表度数"
            }
        },
        focusCleanup: true
    });

    /*提交按钮*/
    function submitHandler() {
        console.log($.validate.form())
        if ($.validate.form()) {
            var data = $('#form-waterRate-add').serializeArray();
            var status = $("input[id='status']").is(':checked')==true?1:0;
            data.push({"name":"status","value":status})
            $.operate.save(prefix + "/addSave", data);
        }
    }

</script>
</body>
</html>